<script>
import PictureWrap from "@/components/PictureWrap.vue";
import draggable from "vuedraggable";
import {put, upload} from "@/api/docMG";
import Request from "@/api/request";
import {VueCropper} from "vue-cropper";

export default {
  name: "GovresearchUpload",
  components: {draggable, PictureWrap, VueCropper},

  data() {
    return {
      filelist: [],
      uuid: null,
      previews: {},
      option: {
        img: 'https://img.okay.do/a82c19d3cec2dd05ce7dd4ec821bf8e3_W1190_H1684_G0', //裁剪图片的地址
        outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
        outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
        info: true,          //图片大小信息
        canScale: true,      //图片是否允许滚轮缩放
        autoCrop: false,      //是否默认生成截图框
        fixed: true,         //是否开启截图框宽高固定比例
        fixedNumber: [0.706, 1], //截图框的宽高比例
        full: false,         //false按原比例裁切图片，不失真
        fixedBox: false,      //固定截图框大小，不允许改变
        canMove: false,      //上传图片是否可以移动
        canMoveBox: true,    //截图框能否拖动
        original: false,     //上传图片按照原始比例渲染
        centerBox: false,    //截图框是否被限制在图片里面
        height: true,        //是否按照设备的d pr 输出等比例图片
        infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000,    //限制图片最大宽度和高度
        enlarge: 1,          //图片根据截图框输出比例倍数
        mode: 'contain', //图片默认渲染方式 	contain , cover, 100px, 100% auto
        limitMinSize: 10,	//裁剪框限制最小区域	10	Number, Array, String
        fillColor: ''    //导出时背景颜色填充
      },


      img: 'https://img.okay.do/a82c19d3cec2dd05ce7dd4ec821bf8e3_W1190_H1684_G0',
      ruleForm: {


        title: "",
        rejected: "0",
        description: "",
        isCustomType: "0",
        filesCount: 0,
        selected: null,
        isPrivate: "0",
        modDbTable: "govresearch",
        coauthors: [
          {
            docId: "",
            ownerId: "",
            rank: "1",
            realname: "",
            institution: "",
            correspondent: 0,
            equalFirst: 0,
            whetherClaim: "",
            userId: "",
            enRealname: "",
            insRank: "",
            insId: "",
            staffid: "",
            identity: "老师",
            enFormat: "",
            isSelf: 1,
          }
        ],
        rbookId: "505",
        modType: "27",
        yearMin: "0",
        yearMax: "0",
        removed: 0,
        docRank: "0",
        docStatus: 0,
        source: "",
        typeid: "",
        lever: "",
        number: "",
        myRank: "1",
        puttime: "",
        kcStatus: "",
        endtime: null,
        rangeValue: "0",
        weight: "85",
        moduleSort: "",
        funds: "",
        organization: "",
        created: "1709515146",
        updated: "1709515146",

      },
      list: []
    }
  },
  mounted() {

    if (this.$route.params.data !== undefined) {
      this.ruleForm = this.$route.params.data
      Request.get(`file?id=${this.ruleForm.id}&type=govresearch&title=${this.ruleForm.title}`,).then(res => {
        this.uuid = res.data.uuid
        this.list = res.data.images
        this.img = this.path + this.list[0].image
      })
    }

  },
  methods: {
    remove() {
      this.ruleForm.coauthors.pop()

    },
    addcoauthor() {
      this.ruleForm.coauthors.push({
        rank: this.ruleForm.coauthors.length + 1,
        identity: "老师",
      })
    },
    select(index) {
      this.img = index
      this.$refs["img"].src = this.img;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.id === undefined) {
            upload('govresearch', this.list, this.ruleForm).then(res => {
              if (res.code === 1) {
                this.$message.success(res.message)
                this.$router.push("govresearch")
              } else this.$message.error(res.message)
            })
          } else {
            put('govresearch', this.list, this.ruleForm).then(res => {
              if (res.code === 1) {
                this.$message.success(res.message)
                this.$router.push("govresearch")
              } else this.$message.error(res.message)
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


    uploadFile() {
      console.log(this.filelist)

    },
    //初始化函数
    imgLoad(msg) {
      console.log("工具初始化函数=====" + msg)
    },
    //图片缩放
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    //向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    //向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    //实时预览函数
    realTime(data) {
      this.previews = data
    },
    getCropBlob() {
      this.$refs.cropper.getCropBlob(data => {
        // do something
        console.log(data)
      })
    },
    imgMoving() {
    },
    onchange(file, fileList) {
      this.fileList = []
      this.fileList.push(file)
      var formData = new FormData
      formData.append("multipartFile", file.raw)
      Request.post("file", formData).then(res => {
        this.uuid = res.data.uuid
        this.list = res.data.images
        this.img = this.path + this.list[0].image
      })
    }
  }
}

</script>

<template>
  <div class="upload">
    <div class="left" v-show="list.length!==0">
      <el-menu @select="select">
        <draggable
            :list="list"
            v-bind="$attrs"
            class="images">
          <el-menu-item style="width:auto ;height: auto" :index="path+module.image" v-for="module in list"
                        :key="module.id">
            <img ref="img" class="images-item" :src="path+module.image" :key="module.id">
            <div class="mask-block">
              <div class="actions"><p>拖动排序</p></div>
            </div>
          </el-menu-item>
        </draggable>
      </el-menu>
      <el-upload
          style="position: fixed; bottom: 0; left: 43px"
          class="uploadbox"
          :auto-upload="false"
          action=""
          :file-list="filelist"
          :http-request="uploadFile"
          :on-change="onchange"

          multiple>
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>

    <div class="center">
      <template>
        <div class="cropper-content">
          <el-upload
              v-show="img===option.img"
              class="uploadbox"
              :auto-upload="false"
              action=""
              :file-list="filelist"
              drag
              :http-request="uploadFile"
              :on-change="onchange"

              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div class="cropper">
            <VueCropper
                ref="cropper"
                :img="img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :info="option.info"
                :canScale="option.canScale"
                :autoCrop="option.autoCrop"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :full="option.full"
                :fixedBox="option.fixedBox"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :centerBox="option.centerBox"
                :height="option.height"
                :infoTrue="option.infoTrue"
                :maxImgSize="option.maxImgSize"
                :enlarge="option.enlarge"
                :mode="option.mode"
                @realTime="realTime"
                @imgLoad="imgLoad"
                @imgMoving="imgMoving"
            >
            </VueCropper>
          </div>
          <!--底部操作工具按钮-->
          <div class="footer-btn">

            <el-button size="mini" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
            <el-button size="mini" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button>
            <el-button size="mini" plain @click="rotateLeft">↺ 左旋转</el-button>
            <el-button size="mini" plain @click="rotateRight">↻ 右旋转</el-button>

          </div>
        </div>
      </template>
    </div>
    <div class="from">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" style="margin-top: 22px">
        <el-form-item label="课题名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="基金名称" prop="title">
          <el-input v-model="ruleForm.source"></el-input>
        </el-form-item>


        <el-form-item label="课题类型" prop="my_rank">
          <el-select v-model="ruleForm.typeid" placeholder="请选择课题类型">
            <el-option value="重点"></el-option>
            <el-option value="面上"></el-option>
            <el-option value="青年"></el-option>
            <el-option value="一班"></el-option>
            <el-option value="自筹"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授予单位" prop="title">
          <el-input v-model="ruleForm.organization"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="lever">
          <el-select v-model="ruleForm.lever" placeholder="请选择级别">
            <el-option value="国家级"></el-option>
            <el-option value="省部级"></el-option>
            <el-option value="市厅级"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="课题编号" prop="title">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>


        <el-form-item label="开始时间">
          <el-date-picker
              v-model="ruleForm.pubtime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-date-picker
              v-model="ruleForm.endtime"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课题状态" prop="kcStatus">
          <el-select v-model="ruleForm.kcStatus" placeholder="请选择课题状态">
            <el-option value="在研"></el-option>
            <el-option value="结题"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注信息">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>


        <el-form-item label="作者信息">

          <el-table
              :header-cell-style="{'text-align':'center'}"
              fit
              :data="ruleForm.coauthors"
              border
              style="width: 100%;padding: 0">

            <el-table-column
                width="50"
                label="操作"
            >
              <template v-slot:default="row">
                <el-button @click="remove" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>

            <el-table-column
                prop="rank"
                label="排序"
                width="80"
            >
              <template v-slot:default="{row}">

                <el-select size="mini" v-model="row.rank">
                  <el-option v-for="count in 10" :value="count" :key="count"></el-option>
                </el-select>
              </template>

            </el-table-column>
            <el-table-column
                prop="realname"
                label="姓名"
                width="100"
            >
              <template v-slot:default="{row}">
                <template>
                  <el-input v-model="row.realname"/>
                </template>
              </template>
            </el-table-column>
            <el-table-column
                prop="identity"
                label="作者身份"
                width="110px">
              <template v-slot:default="{row}">
                <el-select v-model="row.identity">
                  <el-option value="老师"></el-option>
                  <el-option value="博士生"></el-option>
                  <el-option value="硕士生"></el-option>
                  <el-option value="本科生"></el-option>
                  <el-option value="其他"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column
                prop="institution"
                label="单位名称">
              <template v-slot:default="{row}">
                <template>
                  <el-input v-model="row.institution"/>
                </template>
              </template>
            </el-table-column>
          </el-table>

          <el-button @click="addcoauthor" style="margin-left: 10px" type="success" icon="el-icon-plus" size="mini"
                     circle></el-button>

        </el-form-item>
        <!--        <el-form-item label="关联课题" prop="name">
                  <el-select placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>-->
        <!--        <el-form-item label="成果同步">-->
        <!--          <el-select v-model=ruleForm.isPrivate>-->
        <!--            <el-option label="已加入单位" value="0">-->
        <!--            </el-option>-->
        <!--            <el-option label="个人私有" value="1">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">上传</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>

.cropper-content {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  height: 100%;
}

.uploadbox {
  text-align: center;
}

.cropper {
  box-sizing: border-box;
  background-color: #efefef;
  flex: 1;
}

.vue-cropper {
  background-image: unset;
}

.upload {
  overflow: hidden;
  display: flex;
  height: calc(100vh - 76px);
}

.left {
  overflow-x: hidden;
  float: left;
  width: 11%;
  background: white;
  border-radius: 3px;
  position: relative;
  height: calc(100vh - 76px);
}

.center {
  flex: 1;
  position: relative;
  width: 50%;
  margin-left: 0;
  margin-right: 0;
  height: calc(100vh - 76px);
}

.from {
  position: relative;
  height: calc(100% - 50px);
  width: 50%;
  overflow: auto;
}


.images {
  text-align: center;
}

.images-item {
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 96px;
  height: 137px;
  background-color: white;
}

.images-item:hover {
  border: solid 2px #409eff;
}


.mask-block .actions {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}


</style>
